import React, { useState, useEffect } from 'react';
import { getClientH } from '../base/util';

const get_h = (mhigh) => {
    const h = getClientH() - mhigh;
    if (h > 200) {
        return h;
    }

    return 200;
};

const ClientView = ({ children, mhigh=125, className }) => {
    const h = get_h(mhigh);
    const [high, setHigh] = useState(h);

    useEffect(() => {
        const onResize = () => {
            const h = get_h(mhigh);
            setHigh(h);
        }

        window.addEventListener('resize', onResize)

        return () => window.removeEventListener('resize', onResize);
    }, [mhigh]);

    return (
        <div className={"overflow-auto " + className}>
            <div style={{ height: high + "px" }}>
                {children}
            </div>
        </div>
    );
};

const MainView = ({ children }) => (
    <div className="flex flex-col">
        {children}
    </div>
);

export {ClientView, MainView};
